<template>
  <div>
    <center>

				<h3>商品展示</h3>

					<table v-for="item in datalist">

						<tr>
              <th>
              {{ item.name }}
              </th>
            </tr>
            <tr>
              <td>
              {{ item.price }}.00
              </td>
            </tr>
					</table>



        <!--分页-->
        <br><br>
        <div>

          <button @click="getdata(lastpage)" v-show="lastpage">上一页</button>

          <ul>
            <li v-for="index in all">

              <button @click="getdata(index)">{{ index }}</button>

            </li>
          </ul>

          <button @click="getdata(nextpage)" v-show="nextpage">下一页</button>

        </div>

      </center>


		</div>


</template>



<script>

export default {
  data () {
    return {
      msg: "这是一个变量",
      //自主分页
      total:0,//商品总数
      cur:1,  //当前页
      all:0, //总页数
      lastpage:0,//上一页
      nextpage:0,//下一页
      size:5,


      //商品列表
      datalist:[],


    }
  },

  mounted:function(){

    //调用自主分页接口
    this.getdata(1);



},
  methods:{

    //自主分页接口
    getdata:function(mypage){


       //发送请求
        this.axios.get('http://localhost:8000/goodall/',{params:{page:mypage,size:this.size}}).then((result) =>{

                console.log(result);
                this.datalist = result.data.data;

                //判断上一页
          if (mypage==1){

            this.lastpage = 0;

          }else {

            this.lastpage = mypage - 1;

          }

          //计算总页数
          this.all = Math.ceil(result.data.total / this.size);


          //判断下一页
          if (mypage == this.all){
            this.nextpage = 0;
          }else {
            this.nextpage = mypage + 1;
          }



          });


    },



  }
}

</script>

<style>



</style>
